<template>
    <!-- animated fadeIn 淡入动画 -->
    <div class="CJ">
        <div class="main">
            <div class="activityTheme" v-html="activityContent"></div>
            <div class="activityDraw">
                <!-- 抽奖 -->
                <div class="box">
                    <div class="row" :class="select == item.num ? 'active' : ''" v-for="(item, index) in ruleslist" :key="index">
                        <p>{{ item.coinMin === item.coinMax ? item.coinMin : item.coinMin + '-' + item.coinMax }}</p>
                        <img :src="item.image.img" alt="" />
                    </div>
                    <div class="draw" @click="startDraw()">
                        <p class="residue">
                            剩余可抽奖
                            <span>{{ paylist.drawNum || 0 }}</span>
                            次
                        </p>
                    </div>
                </div>
                <!-- 中奖信息 -->
                <div class="right_message">
                    <div class="activityruleS">· 中奖信息 ·</div>
                    <div class="marquees">
                        <vue-seamless-scroll :data="msglist" :class-option="optionHover">
                            <ul class="item">
                                <li v-for="(item, index) in msglist" :key="index">
                                    <span class="title" v-html="item"></span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
                <!-- 个人资料 -->
                <div class="user">
                    <p v-if="user_mes.user">
                        玩家账号：
                        <span>{{ user_mes.user.userName }}</span>
                        <span class="logout" @click="logout()">退出></span>
                    </p>
                    <p v-else class="player login_account" @click="login_account()">
                        玩家账号：
                        <span>未登录</span>
                    </p>
                    <p>
                        累计充值：
                        <span>{{ paylist.payMoney || 0 }}</span>
                        <span class="logout" @click="reload()" v-show="user_mes.user">刷新></span>
                    </p>
                    <span class="qcz" @click="lottery_login()"></span>
                </div>
                <!-- 活动规则 -->
                <div class="rule flex">
                    <div class="rule_box">
                        <p class="p1">累计充值</p>
                        <div v-for="(item, index) in ruleslist" :key="index">{{ item.pay }}</div>
                    </div>
                    <div class="rule_box">
                        <p class="p2">抽奖次数</p>
                        <div v-for="(item, index) in ruleslist" :key="index">{{ item.num }}</div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="495px" :append-to-body="true" class="dialogVisible">
            <div style="border: 1.5px solid #b4875c">
                <img src="@/assets/ChoJiang/huojiangtanchuang.png" class="img" />
                <div class="close" @click="dialogVisible = false"></div>
                <!-- <p class="zhongjiang">中奖产品为: {{ ZJmoney }}</p> -->
                <div class="zhongjiang">
                    <p>恭喜您获得</p>
                    <p class="mon">PK币×{{ ZJmoney }}</p>
                    <span class="guanbi" @click="dialogVisible = false"></span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { logouts, drawUserNUMS, drawUsermoneys, drawUserrules, MembershipMultipliers } from '@/api/url'
export default {
  created () {
    this.drawUserrules()
  },
  data () {
    const img_1 = require('@/assets/ChoJiang/1.png')
    const img_2 = require('@/assets/ChoJiang/1.png')
    const img_3 = require('@/assets/ChoJiang/2.png')
    const img_4 = require('@/assets/ChoJiang/2.png')
    const img_5 = require('@/assets/ChoJiang/2.png')
    const img_6 = require('@/assets/ChoJiang/3.png')
    const img_7 = require('@/assets/ChoJiang/3.png')
    const img_8 = require('@/assets/ChoJiang/4.png')
    return {
      bannerList: [{ img: img_4 }, { img: img_8 }, { img: img_6 }, { img: img_2 }, { img: img_5 }, { img: img_1 }, { img: img_3 }, { img: img_7 }],
      dialogVisible: false,
      select: 1, //页面对应抽奖下标
      timer: '',
      count: 0,
      msglist: [],
      ruleslist: [],
      paylist: '', //获取抽奖数据
      ZJmoney: '',//中奖金额
      activityContent: '',//活动内容
      multiple: null,
      boxName: ""
    };
  },
  mounted () {
    this.$EventBus.$once('boxName', data => {
      this.boxName = data
      this.MembershipMultipliers()
    })
    var WZname = window.localStorage.getItem('title').split('盒子');
    var code = '';
    var that = this;
    // var suiji = '';
    var rnd = '';
    if (that.multiple == 1) {
      var codeLength = 3; //PK币的长度，可以根据个人需求改变
    } else {
      var codeLength = 4; //PK币的长度，可以根据个人需求改变
    }
    var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    // 随机数PK币
    function getRandomNumberByRange () {
      // rnd = parseInt(Math.random() * (2500 + 1 - 100) + 100);
      if (that.multiple == 1) {
        rnd = parseInt(Math.random() * (150 + 1 - 20) + 20);
      } else {
        rnd = parseInt(Math.random() * (1500 + 1 - 100) + 100);
      }
    }
    //生成
    function ASD () {
      for (var i = 0; i < codeLength; i++) {
        //循环遍历codeLength，值是几，就循环几次
        var index = Math.floor(Math.random() * 10); //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
        code += random[index]; //根据索引取得随机数加到code上
        if (code.length == 4) {
          that.msglist.push('恭喜玩家' + WZname[0] + '' + code + '**获得了 ' + rnd + 'PK币');
          code = '';
          rnd = '';
        }
      }
    }
    for (let i = 0; i < 50; i++) {
      getRandomNumberByRange();
      ASD();
    }
  },
  methods: {
    // 去充值
    lottery_login () {
      if (this.user_mes && this.user_mes.user) {
        this.$EventBus.$emit('open_VoucherCenterdialogVisible', true)//!打开充值弹窗
      } else {
        this.$EventBus.$emit('ishow_loginDialog', true);//!打开登录弹窗
      }
    },
    // 玩家账号是否登录
    login_account () {
      this.$EventBus.$emit('ishow_loginDialog', true)//!打开登录弹窗
    },
    // 开始抽奖
    startDraw () {
      if (this.user_mes && this.user_mes.user) {
        if (this.paylist.drawNum !== 0) {
          this.paylist.drawNum = this.paylist.drawNum - 1
          this.drawUsermoneys()
          this.timer = setInterval(() => {
            this.spinPrize();
          }, 100);
        } else {
          this.$message({ message: '暂无抽奖次数,请充值', type: 'warning', center: true });
        }
      } else {
        this.$EventBus.$emit('ishow_loginDialog', true)//!打开登录弹窗
      }
    },
    // 抽奖后的结果
    spinPrize () {
      var spin = 4; //旋转圈
      var win = this.paylist.draw.num; //中奖产品 0-7
      this.select += 1;
      if (this.select > 8 && this.count != spin) {
        this.select = 0;
        this.count += 1;
      }
      if (this.select == win && this.count == spin) {
        clearInterval(this.timer);
        // if (this.paylist.draw.num == 4) {
        //   this.select = 1;
        // }
        // if (this.paylist.draw.num == 8) {
        //   this.select = 2;
        // }
        // if (this.paylist.draw.num == 6) {
        //   this.select = 3;
        // }
        // if (this.paylist.draw.num == 2) {
        //   this.select = 4;
        // }
        // if (this.paylist.draw.num == 5) {
        //   this.select = 5;
        // }
        // if (this.paylist.draw.num == 1) {
        //   this.select = 6;
        // }
        // if (this.paylist.draw.num == 3) {
        //   this.select = 7;
        // }
        // if (this.paylist.draw.num == 7) {
        //   this.select = 8;
        // }
        this.select = this.paylist.draw.num;
        this.count = 0;
        this.drawUserNUMS()
        this.dialogVisible = true;
        // console.log('中奖产品为:' + this.list[this.select].name);
      }
    },
    // 获取当前抽奖次数
    async drawUserNUMS () {
      const res = await drawUserNUMS()
      if (res.data.code === 200) {
        this.paylist = res.data
        // console.log(res.data.switch);
        // if (res.data.switch === false) {
        //   this.$message({ message: '活动已经结束啦', type: 'error', center: true });
        // }
      }
    },
    // 获取抽奖规则
    async drawUserrules () {
      const res = await drawUserrules()
      if (res.data.code === 200) {
        const arr = res.data.data
        // this.multiple = Number(res.data.magnification);
        this.activityContent = res.data.activity
        if (res.data.data) {
          if (arr.length == 8) {
            for (let i = 0; i < arr.length; i++) {
              for (let j = 0; j < this.bannerList.length; j++) {
                if (i - 1 == j - 1) {
                  arr[i]['image'] = this.bannerList[j]
                }
              }
            }
            this.ruleslist = arr
          }
        }
        // console.log(this.ruleslist);
      }
    },
    //抽奖金额
    async drawUsermoneys () {
      const res = await drawUsermoneys()
      if (res.data.code === 200) {
        // console.log(res);
        this.ZJmoney = res.data.money
      }
    },
    // 退出登录
    async logout () {
      //修改父组件传来的值
      try {
        this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const res = await logouts();
            // console.log(res);
            if (res.data.code === 200) {
              this.paylist = ''
              this.$message({ message: res.data.msg, type: 'success', center: true });
              this.$store.commit('setUser', {}); // 把本地的token清空
              this.$store.commit('user_xx', {}); // 把本地的token清空
              window.localStorage.removeItem('token'); // 把本地的token清空
              this.$EventBus.$emit('close_user', false);//!隐藏用户首页信息
            }
          })
          .catch();
      } catch (error) {
        console.log(error);
      }
    },
    // 刷新
    reload () {
      this.$EventBus.$emit('callTopGetInfos', 1)//!调用首页的gitInfo方法
      this.drawUserNUMS()
      setTimeout(() => { this.$message({ message: '刷新成功!', type: 'success', center: true }) }, 1000)
    },
    // 是否请求抽奖次数
    user_login () { if (this.user_mes && this.user_mes.user) { this.drawUserNUMS() } },
    //获取会员倍率
    async MembershipMultipliers () {
      const res = await MembershipMultipliers()
      if (res.data.code == 200) {
        this.multiple = Number(res.data.magnification);
        window.localStorage.setItem(this.boxName + 'MembershipMultipliers', this.multiple) //把倍率存到本地
      }
    }
  },
  computed: {
    ...mapState(['user_mes', 'user']),
    optionHover () {
      return {
        hoverStop: false, //鼠标悬停关闭
        singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)
        singleHeight: 0, //单行停顿间距(不需要停顿不设置)
        waitTime: 0, //单行停顿时间(不需要停顿不设置)
        step: 0.8, //向上滚动不停顿
        limitMoveNum: 0, // 开始无缝滚动的数据量
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true // 开启数据实时监控刷新dom
      };
    }
  },
  components: {},
  beforeDestroy () {//移除监听事件
    this.$EventBus.$off('boxName')
  },
  watch: {
    user (oldval, newval) {
      setTimeout(() => { this.user_login() }, 1000)
    }
  }
};
</script>

<style scoped lang="less">
.CJ {
    .main {
        overflow-y: auto !important;
        height: 810px !important;
        background: url('@/assets/ChoJiang/bg1.png');
        // 活动主题
        .activityTheme {
            width: 500px;
            margin: 0 auto;
            margin-top: 100px;
            color: #761b0a;
        }
        // 活动抽奖
        .activityDraw {
            position: relative;
            background: url('@/assets/ChoJiang/bg1-1.png');
            width: 1024px;
            height: 411px;
            margin-top: 20px;
            margin-left: 30px;
            // 九宫格
            .box {
                position: absolute;
                width: 430px;
                height: 328px;
                top: 30px;
                left: 45px;
                .row {
                    position: absolute;
                    color: #b63a27;
                    text-align: center;
                    width: 129px;
                    height: 110px;
                    p {
                        position: absolute;
                        top: 80px;
                        width: 129px;
                        text-align: center;
                    }
                }
                .draw {
                    position: absolute;
                    top: 127px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    width: 129px;
                    height: 91px;
                    background: url('@/assets/ChoJiang/btn1.png');
                    background-size: 100%;
                    text-align: center;
                    color: #fff;
                    &::after {
                        display: none;
                        content: '';
                        position: absolute;
                        top: 0px;
                        left: 50%;
                        transform: translate(-50%, 0);
                        width: 129px;
                        height: 91px;
                        background-size: 100%;
                        background: url('@/assets/ChoJiang/btn.png');
                    }
                    &:hover::after {
                        display: block;
                    }
                    .residue {
                        position: relative;
                        font-size: 12px;
                        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                        font-weight: 400;
                        text-align: center;
                        color: #ffdc7a;
                        padding-top: 60px;
                        letter-spacing: 0.32px;
                        z-index: 99;
                        span {
                            font-weight: 600;
                            color: #ffeebc;
                        }
                    }
                }
            }
            // 个人资料
            .user {
                position: absolute;
                top: 37px;
                left: 518px;
                width: 196px;
                p {
                    font-size: 12px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    color: #dac493;
                    line-height: 28px;
                    span {
                        font-size: 14px;
                        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                        text-align: center;
                        color: #ffecba;
                        line-height: 28px;
                    }
                    .logout {
                        margin-left: 10px;
                        font-size: 14px;
                        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                        color: #dac493;
                        line-height: 28px;
                        cursor: pointer;
                        &:hover {
                            color: #ffecba;
                        }
                    }
                }
                .qcz {
                    position: relative;
                    margin: 0 auto;
                    width: 135px;
                    height: 33px;
                    display: block;
                    background: url('@/assets/ChoJiang/qcz.png');
                    margin-top: 10px;
                    cursor: pointer;
                    &:hover:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 135px;
                        height: 33px;
                        background: url('@/assets/ChoJiang/qcz-1.png');
                    }
                }
            }
            // 中奖信息
            .right_message {
                position: absolute;
                top: 160px;
                left: 500px;
                .activityruleS {
                    font-size: 14px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    font-weight: 400;
                    text-align: center;
                    color: #ffdfa1;
                    line-height: 32px;
                    letter-spacing: 0.44px;
                }
                .marquees {
                    height: 190px;
                    width: 230px;
                    font-size: 12px;
                    transform: scale(0.8333);
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    text-align: center;
                    color: #ffdfa1;
                    line-height: 20px;
                    letter-spacing: 0.32px;
                    margin: 0px auto;
                    margin-top: -8px;
                    overflow: hidden;
                    pointer-events: none;
                    ul li {
                        width: 250px;
                        text-align: left;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            // 规则
            .rule {
                position: absolute;
                top: 50px;
                left: 820px;
                color: #ffdfa1;
                text-align: center;
                font-size: 12px;
                .rule_box {
                    .p1 {
                        width: 81px;
                    }
                    .p2 {
                        width: 81px;
                    }
                    div {
                        width: 81px;
                        border-bottom: 1px solid #a44b23;
                        padding-top: 10px;
                        padding-bottom: 5px;
                    }
                }
            }
        }
    }
    /deep/ .el-dialog__body {
        height: 650px !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }
}
.dialogVisible {
    /deep/ .el-dialog__body {
        height: 0px !important;
        padding: 0 !important;
    }
}
.close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-image: url('@/assets/ChoJiang/close.png');
    cursor: pointer;
    &:hover {
        background-image: url('@/assets/ChoJiang/close2.png');
    }
}
.zhongjiang {
    width: 100%;
    position: absolute;
    top: 72px;
    text-align: center;
    p {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        color: #ffdc7a;
        line-height: 28px;
        letter-spacing: 0.8px;
    }
    .mon {
        margin-top: 5px;
        font-size: 22px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        color: #ffeab1;
        line-height: 28px;
        letter-spacing: 1.1px;
    }
    .guanbi {
        position: relative;
        margin: 50px auto;
        display: block;
        width: 183px;
        height: 45px;
        background: url('@/assets/ChoJiang/guanbi.png');
        &:hover:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 183px;
            height: 45px;
            background: url('@/assets/ChoJiang/guanbi-1.png');
        }
    }
}
.box .row:nth-child(1) {
    top: 0px;
    left: 0px;
}
.box .row:nth-child(2) {
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}
.box .row:nth-child(3) {
    top: 0px;
    right: 0px;
}
.box .row:nth-child(4) {
    top: 110px;
    right: 0px;
}
.box .row:nth-child(5) {
    bottom: 0px;
    right: 0px;
}
.box .row:nth-child(6) {
    bottom: 0px;
    right: 50%;
    transform: translate(50%, 0);
}
.box .row:nth-child(7) {
    bottom: 0px;
    left: 0px;
}
.box .row:nth-child(8) {
    top: 110px;
    left: 0px;
}
.active {
    /* background: lightseagreen !important; */
    filter: brightness(1.1);
}
</style>
